<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员控制台 - 智慧考勤系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
</head>
<body>
    <div class="container admin-container">
        <header>
            <h1>智慧考勤系统 - 管理员控制台</h1>
            <nav>
                <ul>
                    <li><a href="#" class="active" data-tab="dashboard">仪表盘</a></li>
                    <li><a href="#" data-tab="employees">员工管理</a></li>
                    <li><a href="#" data-tab="attendance">考勤记录</a></li>
                    <li><a href="#" data-tab="leave">请假管理</a></li>
                    <li><a href="#" data-tab="policies">制度管理</a></li>
                    <li><a href="/" onclick="window.location.href='/'">返回主页</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <!-- Dashboard Tab -->
            <section id="dashboard" class="tab-content active">
                <h2>仪表盘</h2>
                <div class="dashboard-grid">
                    <div class="card stat-card">
                        <h3>今日出勤</h3>
                        <p class="stat-number" id="today-attendance">0</p>
                    </div>
                    <div class="card stat-card">
                        <h3>待审批请假</h3>
                        <p class="stat-number" id="pending-leaves">0</p>
                    </div>
                    <div class="card stat-card">
                        <h3>总员工数</h3>
                        <p class="stat-number" id="total-employees">0</p>
                    </div>
                </div>
            </section>

            <!-- Employees Tab -->
            <section id="employees" class="tab-content">
                <div class="module-header">
                    <h2>员工管理</h2>
                </div>
                <div class="action-bar">
                    <input type="text" id="employee-search" placeholder="搜索员工...">
                    <button id="add-employee-btn" class="primary-btn">添加员工</button>
                    <button id="sync-face-status-btn" class="secondary-btn" title="同步所有员工的人脸注册状态与人脸数据">同步人脸状态</button>
                </div>
                <div class="data-table">
                    <table id="employee-table">
                        <thead>
                            <tr>
                                <th>员工ID</th>
                                <th>姓名</th>
                                <th>部门</th>
                                <th>职位</th>
                                <th>人脸注册</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="employee-table-body">
                            <!-- Employee data will be loaded here dynamically -->
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- Attendance Tab -->
            <section id="attendance" class="tab-content">
                <h2>考勤记录</h2>
                <div class="card">
                    <div class="action-bar">
                        <div class="date-filter">
                            <label for="attendance-date-from">从:</label>
                            <input type="date" id="attendance-date-from">
                            <label for="attendance-date-to">至:</label>
                            <input type="date" id="attendance-date-to">
                            <button id="filter-attendance-btn" class="secondary-btn">筛选</button>
                        </div>
                        <button id="export-attendance-btn" class="secondary-btn">导出</button>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>员工ID</th>
                                <th>姓名</th>
                                <th>签到时间</th>
                                <th>签退时间</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="attendance-table-body">
                            <!-- Attendance data will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- Leave Tab -->
            <section id="leave" class="tab-content">
                <h2>请假管理</h2>
                <div class="card">
                    <div class="action-bar">
                        <div class="status-filter">
                            <label for="leave-status-filter">状态:</label>
                            <select id="leave-status-filter">
                                <option value="all">全部</option>
                                <option value="pending">待审批</option>
                                <option value="approved">已批准</option>
                                <option value="rejected">已拒绝</option>
                            </select>
                            <button id="filter-leave-btn" class="secondary-btn">筛选</button>
                        </div>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>申请ID</th>
                                <th>员工ID</th>
                                <th>姓名</th>
                                <th>请假类型</th>
                                <th>开始日期</th>
                                <th>结束日期</th>
                                <th>原因</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="leave-table-body">
                            <!-- Leave data will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- Policies Tab -->
            <section id="policies" class="tab-content">
                <h2>制度管理</h2>
                <div class="card">
                    <div class="action-bar">
                        <button id="add-policy-btn" class="primary-btn">添加制度</button>
                    </div>
                    <div class="policies-container" id="policies-container">
                        <!-- Policy cards will be loaded here -->
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <p>&copy; 2023 智慧考勤系统 | 管理员控制台</p>
        </footer>
    </div>

    <!-- Modal for adding/editing policies -->
    <div id="policy-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="policy-modal-title">添加制度</h2>
            <form id="policy-form">
                <div class="form-group">
                    <label for="policy-title">标题:</label>
                    <input type="text" id="policy-title" required>
                </div>
                <div class="form-group">
                    <label for="policy-category">类别:</label>
                    <select id="policy-category" required>
                        <option value="attendance">考勤制度</option>
                        <option value="leave">请假制度</option>
                        <option value="general">一般制度</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="policy-content">内容:</label>
                    <textarea id="policy-content" rows="10" required></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="primary-btn">保存</button>
                    <button type="button" class="secondary-btn close-btn">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal for adding/editing employees -->
    <div id="employee-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="employee-modal-title">添加员工</h2>
            <form id="employee-form">
                <div class="form-group">
                    <label for="employee-id">员工ID:</label>
                    <input type="text" id="employee-id" required>
                </div>
                <div class="form-group">
                    <label for="employee-name">姓名:</label>
                    <input type="text" id="employee-name" required>
                </div>
                <div class="form-group">
                    <label for="employee-department">部门:</label>
                    <input type="text" id="employee-department">
                </div>
                <div class="form-group">
                    <label for="employee-position">职位:</label>
                    <input type="text" id="employee-position">
                </div>
                <div class="form-group">
                    <label>人脸注册状态:</label>
                    <div id="face-status-display">未注册</div>
                    <small class="form-hint">注册状态根据员工是否完成人脸采集自动更新，无法手动修改</small>
                </div>
                <div class="form-actions">
                    <button type="submit" class="primary-btn">保存</button>
                    <button type="button" class="secondary-btn close-btn">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
</body>
</html> 